<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        li {
            list-style: none;
        }

        div {
            margin: 5px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div>
            <p>count:{{count}}</p>
            <p>double:{{double}}</p>
            <p>triple:{{triple}}</p>
            <button @click="count++">点击</button>
        </div>
        <hr>
        <div class="input-group">
            <label>firstName:</label>
            <input type="text" v-model="firstName">
            <span>{{firstName}}</span>
        </div>
        <div class="input-group">
            <label>lastName:</label>
            <input type="text" v-model="lastName">
            <span>{{lastName}}</span>
        </div>
        <div class="input-group">
            <label>fullName:</label>
            <input type="text" v-model="fullName">
            <span>{{fullName}}</span>
        </div>
    </div>
</body>
<script>

    // 侦听器:
    // 有选择的对data中某项数据进行监听, 当监听数据发生改变之后,可以执行一些副作用操作(数据改变之后对其他操作产生的连带影响)

    // 主要侧重于数据本身发生改变之后 对其他数据造成的影响

    // 注意: 
    // Vue实例初次渲染时, 侦听器上的函数并不执行(默认->后期可以改变),监听到数据改变之后执行

    // 需求:将数组中的每个元素放到对应的li标签内
    var vm = new Vue({
        el: "#app",
        data: {
            count: 1,
            double: 2,
            triple: 3,
            firstName: "",
            lastName: "",
            fullName: "",
        },
        methods: {

        },
        computed: {

        },
        watch: {
            // 监听的数据:数据发生改变时执行的回调函数(回调函数有两个参数 分别表示 更新后的数据和原始数据)
            count: function (newVal, oldVal) {
                console.log("数据count发生改变", newVal, oldVal);
                // 监听到数据发生改变 -> 产生的一系列副作用操作
                this.double = this.count * 2;
                this.triple = this.count * 3;
            },

            // firstName改变
            firstName: function (newVal, oldVal) {
                this.fullName = this.firstName + (this.lastName ? " " + this.lastName : "")
            },
            // lastName改变
            lastName: function (newVal, oldVal) {
                this.fullName = this.firstName + (this.lastName ? " " + this.lastName : "")
            },
            // fullName改变
            fullName: function (newVal, oldVal) {
                var list = newVal.split(" ");
                console.log(list);
                this.firstName = list[0];
                this.lastName = list[1] ? list[1] : "";
            }

        }

    })



</script>

</html>